<template>
    <div class="data-table-container" >
        <table>
            <thead>
                <tr>
                    <th style="width:50px;">#</th>
                    <th v-for="(item,idx) in tableTitle" :style="{width:tWidths[idx]+'px'}">{{item.name}}</th>
                </tr>
            </thead>
        </table>
        <div class="data-table-content">
            <table>
                <tbody>
                    <tr v-for="(item,idx) in tableData">
                        <td style="width:50px;">{{idx+1}}</td>
                        <td v-for="(i,ii) in tableTitle" :style="{width:tWidths[ii]+'px'}">{{item[i.code]===null||item[i.code]===undefined||item[i.code]===''?'--':item[i.code]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    name:"DataTable",
    props:{
        langType:{
            type:String,
            default:window.localStorage.getItem('langType')
        },
        tableData:{
            type:Array,
            default:function(){
                return [];
            }
        },
        tableTitle:{
            type:Array,
            default:function(){
                return [];
            }
        },
    },
    data:()=>({
        tWidths:[]
    }),
    watch:{
        tableTitle(){
        this.setTdWidth();
        },
        tableData(){
            this.setTdWidth();
        }
    },
    methods:{
        setTdWidth(){         
           
            this.tWidths=[];            
           
            for(var i=0;i<this.tableTitle.length;i++){
                var w=new String(this.tableTitle[i].name).length*18;
                var ww=new String(this.tableData[0][this.tableTitle[i].code]).length*13;
                ww=ww>50?ww:50;
                w=w>50?w:50;
            this.tWidths.push(w>ww?w:ww);
            }
           
        }
    },
    mounted(){
        this.setTdWidth();
    },

}
</script>
